const brandBox = document.querySelector('.brand')
const classBox = document.querySelector('.classify')
const priceBox = document.querySelector('.price')
const list_1 = document.querySelector('.list_1')


const fnav = new XMLHttpRequest()
    fnav.open('GET','/fnav?category1Id=101000')
    fnav.onload = function () {
        let str_1 = ''
        let str_2 = ''
        let str_3 = ''
        const res = JSON.parse(fnav.responseText)
        res.data.forEach(function(item,index){
            if(index === 1){
                item.value.forEach(function(item){
                    str_1 += `
                    <span>${ item.brandName }</span>
                    `
                })
                brandBox.innerHTML = str_1
                console.log('str_1')
            }
            if(index === 2){
                item.value.forEach(function(item){
                    str_2 += `

                    <span>${ item.kindname }</span>
                    `
                })
                classBox.innerHTML = str_2

            }
            if(index === 0){
                item.value.forEach(function(item){
                    str_3 += `
                    <span>${ item.begin } ~ ${ item.end }</span>
                    `
                })
                priceBox.innerHTML = str_3
            }
        })
    }
    fnav.send()


const flist = new XMLHttpRequest()
    flist.open('POST','/flist')
    flist.onload = function () {
        const res = JSON.parse(flist.responseText)
        console.log(res.products[0])
        let str = ''
    res.products.forEach(item => {
        str += `
        <li data-id="${ item.id }">
        <div class="show">
            <img src="${ item.coverUrl }" alt="" style="width:100%;">
        </div>
        <div class="info">
            <p class="name">${ item.name }</p>
            <p class="price">
                <span class="newPrice">￥ ${ item.maxPrice }</span>
            </p>
        </div>
    </li>
        `
    })
    list_1.innerHTML = str
    }
    flist.setRequestHeader('content-type','application/x-www-form-urlencoded')
    flist.send('limit=60&offset=0&category_1=%E6%95%B0%E7%A0%81%E5%BD%B1%E9%9F%B3')

$('.list_1').on('click','li > .show > img',function(){
    window.localStorage.setItem('id',$(this).parent().attr('data-id'))
    window.open('./detail.html')
})
$('.list_1').on('click','li > .info > .name',function(){
    window.localStorage.setItem('id',$(this).parent().attr('data-id'))
    window.open('./detail.html')
})
